const 画布 = document.querySelector('canvas');
const 渲染器 = 画布.getContext('2d');

const 宽度 = 画布.width = window.innerWidth;
const 高度 = 画布.height = window.innerHeight;


function 随机数(最小值, 最大值) {
    return Math.floor(Math.random() * (最大值 - 最小值)) + 最小值;
}


function 随机颜色() {
    return (`rgb(${随机数(0, 255)}, ${随机数(0, 255)}, ${随机数(0, 255)})`);
}


class 小球 {
    横坐标;
    纵坐标;
    横速度;
    纵速度;
    颜色;
    尺寸;

    constructor(横坐标, 纵坐标, 横速度, 纵速度, 颜色, 尺寸) {
        this.横坐标 = 横坐标;
        this.纵坐标 = 纵坐标;
        this.横速度 = 横速度;
        this.纵速度 = 纵速度;
        this.颜色 = 颜色;
        this.尺寸 = 尺寸;
    }

    绘制() {
        渲染器.beginPath();
        渲染器.fillStyle = this.颜色;
        渲染器.arc(this.横坐标 - this.尺寸, this.纵坐标 - this.尺寸, this.尺寸, 0, 2*Math.PI);
        渲染器.fill();
    }

    更新() {
        if(this.横坐标 +  this.尺寸 >= 宽度) {
            this.横速度 = - this.横速度;
        }

        if(this.横坐标 - this.尺寸  <= 0) {
            this.横速度 = - this.横速度;
        }

        if(this.纵坐标 + this.尺寸 >= 高度 || this.纵坐标 - this.尺寸 <= 0) {
            this.纵速度 = - this.纵速度;
        }

        this.横坐标 += this.横速度;
        this.纵坐标 += this.纵速度;
    }

    碰撞() {
        for(let i=0; i<小球数组.length; i++) {
            if(this !== 小球数组[i]) {
                const 横距离 = this.横坐标 - 小球数组[i].横坐标;
                const 纵距离 = this.纵坐标 - 小球数组[i].纵坐标;
                const 距离 = Math.sqrt(横距离**2 + 纵距离**2);
                
                if(距离 < this.尺寸 + 小球数组[i].尺寸) {
                    this.颜色 = 小球数组[i].颜色 = 随机颜色();
                }
            }
        }
    }
}


const 小球数组 = [];
while (小球数组.length < 25) {
    let 尺寸 = 随机数(10, 20);
    let 小球1 = new 小球(
        随机数(0 + 尺寸, 宽度 - 尺寸),
        随机数(0 + 尺寸, 高度 - 尺寸),
        随机数(-7, 7),
        随机数(-7, 7),
        随机颜色(),
        尺寸,
    );
    小球数组.push(小球1);
}


function 循环() {
    渲染器.fillStyle = 'rgb(0, 0, 0, 0.25)';
    渲染器.fillRect(0, 0, 宽度, 高度);

    for (let i=0; i < 小球数组.length; i++) {
        小球数组[i].绘制();
        小球数组[i].更新();
        小球数组[i].碰撞();
    }

    requestAnimationFrame(循环);
}

循环();